<template>
  <div>
    <el-card>
      <el-page-header content="记录列表" icon="" title="物业费用管理" />
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="propname" label="名字" width="180" />
        <el-table-column prop="propnumber" label="电话" width="180" />
        <el-table-column prop="propemail" label="邮箱" width="180" />
        <el-table-column prop="building" label="楼号" />
        <el-table-column prop="roomnumber" label="房号" />
        <el-table-column prop="tmoney" label="总金额" />
        <!-- <el-table-column prop="editTime" label="收费时间" width="180" /> -->
        <el-table-column label="收费时间" width="180">
          <template #default="scope">
            {{ formatTime.gettime(scope.row.editTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="ispay" label="是否缴费" width="180" /> -->

        <el-table-column label="是否缴费">
          <template #default="scope">
            <el-tag v-if="scope.row.ispay === 0" class="ml-2" type="danger">未缴费</el-tag>
            <el-tag v-else class="ml-2" type="success">以缴费</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">
              <!--scope.row当前这个对象-->
              编辑
            </el-button>

            <el-popconfirm
              title="你确定要删除吗？"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.row)"
              >、
              <template #reference>
                <el-button size="small" type="danger" @click=""> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" title="编辑用户" width="50%">
      <el-form
        ref="rateFormRef"
        :model="rateForm"
        :rules="rateFormRules"
        label-width="80px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="业主名字" prop="propname">
          <el-input v-model="rateForm.propname" />
        </el-form-item>

        <el-form-item label="业主电话" prop="propnumber">
          <el-input v-model="rateForm.propnumber" />
        </el-form-item>

        <el-form-item label="业主邮箱" prop="propemail">
          <el-input v-model="rateForm.propemail" />
        </el-form-item>

        <el-form-item label="总金额" prop="tmoney">
          <el-input v-model="rateForm.tmoney" />
        </el-form-item>

        <el-form-item label="角色" prop="ispay">
            <el-select
            v-model="rateForm.ispay"
            class="m-2"
            placeholder="Select"
            style="width: 100%"
            >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
            </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEditConfirm()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import formatTime from "@/util/formatTime.js";
const dialogVisible = ref(false);
const tableData = ref([]);
const rateFormRef = ref();
onMounted(() => {
  getTableData();
});

const getTableData = async () => {
  const res = await axios.get("/adminapi/rate/list");
  // console.log(res.data)
  tableData.value = res.data.data;
};

const rateForm = reactive({
  propname: "",
  propnumber: null,
  propemail: "",
  building: 1,
  roomnumber: 101,
  basics: null,
  extend: null,
  tmoney: null,
  ispay: 0,
});

const rateFormRules = reactive({
  propname: [{ required: true, message: "请输入业主名字", trigger: "blur" }],
  propnumber: [{ required: true, message: "请输入业主电话", trigger: "blur" }],
  propemail: [{ required: true, message: "请输入业主邮箱", trigger: "blur" }],
  tmoney: [{ required: true, message: "请输入金额", trigger: "blur" }],
  ispay: [{ required: true, message: "请输入是否缴费", trigger: "blur" }],
});

//拿到当前节点数据显示在界面
const handleEdit = async (data) => {
  const a = data._id;
  console.log(a);
  const res = await axios.get(`/adminapi/rate/list/${a}`);
  console.log(res.data.data);
  Object.assign(rateForm, res.data.data[0]);
  dialogVisible.value = true;
};
//编辑确认回调
const handleEditConfirm = () => {
  rateFormRef.value.validate(async (valid) => {
    if (valid) {
      //校验通过
      // 1.更新后端
      const rateForm2 = reactive({
        _id: rateForm._id,
        propname: rateForm.propname,
        propnumber: rateForm.propnumber,
        propemail: rateForm.propemail,
        tmoney: rateForm.tmoney,
        ispay: rateForm.ispay,
      });
      await axios.put(`/adminapi/rate/list/${rateForm._id}`, rateForm2);
      // 2.隐藏
      dialogVisible.value = false;
      // 3.获取数据
      getTableData();
    } else {
      console.log("不通过");
    }
  });
};

const handleDelete = async (data) => {
  console.log(data);
  await axios.delete(`/adminapi/rate/list/${data._id}`);
  getTableData();
};

//下拉选项
const options = [
  {
    label: "未缴费",
    value: 0,
  },
  {
    label: "以缴费",
    value: 1,
  },
];
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 50px;
}
</style>
